{{ define "content" }}
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>{{ i18n "ZigBee device" . }}</h2>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <form role="form" action="?action=settings" method="post" id="settings">
                    <table class="table table-striped dt-responsive nowrap" style="width:100%">
                        <thead>
                        <tr>
                            <th class="md-col-2">{{ i18n "Variable" . }}</th>
                            <th class="md-col-2">{{ i18n "Value" . }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>{{ i18n "Permit join" . }}</td>
                            <td>
                                <input type="checkbox" class="js-switch" name="permit-join" id="permit-join" value="on" {{ if eq (print .permit_join) "true" }} checked{{ end }} />
                            </td>
                        </tr>
                        <tr>
                            <td>{{ i18n "LED enabled" . }}</td>
                            <td>
                                {{ if .led_support }}
                                    <input type="checkbox" class="js-switch" name="led" id="led" value="on" {{ if eq (print .led_enabled) "true" }} checked{{ end }} />
                                {{ else }}
                                    <td>{{ if .led_enabled }}enabled{{ else }}disabled{{ end }}</td>
                                {{ end }}
                            </td>
                        </tr>
                        {{ if .version }}
                        <tr>
                            <td>{{ i18n "Transport revision" . }}</td>
                            <td>{{ .version.TransportRevision }}</td>
                        </tr>
                        <tr>
                            <td>{{ i18n "Product" . }}</td>
                            <td>{{ .version.Product }} ({{ .version.Type }})</td>
                        </tr>
                        <tr>
                            <td>{{ i18n "Version" . }}</td>
                            <td>v. {{ .version.MajorRelease }}.{{ .version.MinorRelease }}</td>
                        </tr>
                        <tr>
                            <td>{{ i18n "Main trel" . }}</td>
                            <td>{{ .version.MainTrel }}</td>
                        </tr>
                        <tr>
                            <td>{{ i18n "Hardware revision" . }}</td>
                            <td>{{ .version.HardwareRevision }}</td>
                        </tr>
                        {{ end }}
                        {{ if .info }}
                        <tr>
                            <td>{{ i18n "Device type" . }}</td>
                            <td>{{ .info.device_type }}</td>
                        </tr>
                        <tr>
                            <td>{{ i18n "Device state" . }}</td>
                            <td>{{ .info.device_state }}</td>
                        </tr>
                        <tr>
                            <td>{{ i18n "Device IEEE address" . }}</td>
                            <td>{{ .info.ieee_address }}</td>
                        </tr>
                        {{ end }}
                        {{ if .network }}
                        <tr>
                            <td>{{ i18n "Network PAN ID" . }}</td>
                            <td>{{ .network.pan_id }}</td>
                        </tr>
                        <tr>
                            <td>{{ i18n "Network extended PAN ID" . }}</td>
                            <td>{{ .network.extended_pan_id }}</td>
                        </tr>
                        <tr>
                            <td>{{ i18n "Network channel" . }}</td>
                            <td>{{ .network.channel }}</td>
                        </tr>
                        {{ end }}
                        {{ if .checks }}
                        <tr>
                            <td>{{ i18n "Initialization check" . }}</td>
                            <td>{{ if .checks.init }}valid{{ else }}not valid{{ end }}</td>
                        </tr>
                        {{ end }}
                        </tbody>
                    </table>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>{{ i18n "Devices and endpoints" . }}</h2>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <table class="table table-striped datatable dt-responsive nowrap" style="width:100%">
                    <thead>
                    <tr>
                        <th>{{ i18n "Network address" . }}</th>
                        <th>{{ i18n "IEEE address" . }}</th>
                        <th>{{ i18n "Capabilities" . }}</th>
                        <th>{{ i18n "Device type" . }}</th>
                        <th>{{ i18n "Manufacturer code" . }}</th>
                        <th>{{ i18n "Last seen" . }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    {{ range $device := .devices }}
                    <tr>
                        <td>{{ $device.NetworkAddress }}</td>
                        <td>{{ $device.IEEEAddressAsString }}</td>
                        <td>{{ $device.Capabilities }}</td>
                        <td>{{ $device.DeviceTypeAsString }}</td>
                        <td>{{ printf "0x%X" $device.ManufacturerCode }}</td>
                        <td><script type="application/javascript">document.write(dateToString('{{ $device.LastSeen.Format "2006-01-02T15:04:05-07:00" }}'))</script></td>
                    </tr>
                    {{ end }}
                    </tbody>
                </table>
                <table class="table table-striped datatable dt-responsive nowrap" style="width:100%">
                    <thead>
                    <tr>
                        <th>{{ i18n "Endpoint" . }}</th>
                        <th>{{ i18n "Profile ID" . }}</th>
                        <th>{{ i18n "In clusters" . }}</th>
                        <th>{{ i18n "Out clusters" . }}</th>
                        <th>{{ i18n "Network address" . }}</th>
                        <th>{{ i18n "IEEE address" . }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    {{ range $device := .devices }}
                        {{ range $endpoint := $device.Endpoints }}
                        <tr>
                            <td>{{ $endpoint.ID }}</td>
                            <td>{{ $endpoint.ProfileID }}</td>
                            <td>{{ $endpoint.InClusterList }}</td>
                            <td>{{ $endpoint.OutClusterList }}</td>
                            <td>{{ $device.NetworkAddress }}</td>
                            <td>{{ $device.IEEEAddressAsString }}</td>
                        </tr>
                        {{ end }}
                    {{ end }}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{{ end }}

{{ define "head" }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" false) }}
{{ end }}

{{ define "js" }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net/js/jquery.dataTables.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-responsive/js/dataTables.responsive.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-responsive-bs/js/responsive.bootstrap.min.js" false) }}

    <script type="application/javascript">
        $(document).ready(function () {
            {{ if and .errors (ge (len .errors) 0) }}
                {{ range $error := .errors }}
                    new PNotify({
                        title: 'Error',
                        text: '{{ $error }}',
                        type: 'error',
                        hide: false,
                        styling: 'bootstrap3'
                    });
                {{ end }}
            {{ end }}

            function successHandler(r) {
                if (r.result === 'failed') {
                    new PNotify({
                        title: 'Error',
                        text: r.message,
                        type: 'error',
                        hide: false,
                        styling: 'bootstrap3'
                    });
                } else if (r.message !== 'undefined') {
                    new PNotify({
                        title: 'Success',
                        text: r.message,
                        type: 'success',
                        hide: false,
                        styling: 'bootstrap3'
                    });
                }
            }

            $('#settings input[id]').change(function() {
                var
                        f = $('#settings'),
                        e = $(this),
                        data = {}
                ;

                if (e.prop('type') === 'checkbox') {
                    data[e.prop('id')] = e.prop('checked') ? 'on' : 'off';
                } else {
                    data[e.prop('id')] = e.val();
                }

                $.ajax({
                    type: f.prop('method'),
                    url: f.prop('action'),
                    data: data,
                    success: successHandler
                });
            });
        });
    </script>
{{ end }}